{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
	.el-collapse{border:0;}
	.el-collapse-item__header{border:0;}
	.el-collapse-item__wrap{border:0;}
	.border-lg{border-width: 2px !important;}
	.setting-item .setting-item-del{display: none;}
	.setting-item:hover .setting-item-del{display: block;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex mb-3">
		<div class="el-tabs el-tabs--top flex-1">
			<div class="el-tabs__header is-top">
				<div class="el-tabs__nav-wrap is-top">
					<div class="el-tabs__nav-scroll">
						<div class="py-3">
						    <el-button
						        type="warning"
						        size="mini"
						        @click="window.open('/setting/add?type={$ctype}')">
						        添加配置
						    </el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane v-for="v in activeNameList" :label="v.title" :name="v.type"></el-tab-pane>
		</el-tabs>
	</div>
	<el-form  label-width="200px" :label-position="labelPosition"
	  @submit.native.prevent="return;"
	  v-loading="loading">

	  <div v-for="item in list">
	  <el-form-item v-for="(v,index) in item" :label="v.title" class="hover-bg setting-item" v-show="ctype==v.ctype&&formItemShow.indexOf(v.type)>-1">
	  	<div class="setting-item-body flex flex-center">
		  	<div v-if="v.type==='input'" class="px-3 flex-1">
			    <el-input class="col-4 px-0" :class="getInputCol(v.value)"
			    v-model="v.value"
			    @keyup.enter.native="editConfig(v)"></el-input>
				<div class="text-muted small" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'textarea'" class="px-3 flex-1">
		      	<el-input type="textarea" :autosize="{ minRows: 3}" class="col-5 px-0"
		      		v-model="v.value" 
		      		@change="editConfig(v);"></el-input>
				<div class="text-muted small" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'upload'" class="px-3 flex-1">
				  <el-image
				  	v-if="v.url" 
				  	class="mw-200px mh-200px"
				    :src="v.url" 
				    :preview-src-list="[v.url]">
				  </el-image>
			    <div class="row mx-0 flex-center">
			  	  <el-upload
					  class="avatar-uploader"
					  action="/uploadFiles"
					  name="file"
					  accept="image/*"
					  :data="{path:'web/img',index:index,id:v.id}"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :on-error="handleAvatarError"
					  :before-upload="beforeAvatarUpload">
			  			<el-button size="small" type="primary">选择文件</el-button>
				  </el-upload>
					<div class="text-muted small px-3" v-if="v.tips">
						<el-popover
						    placement="top-start"
						    width="300"
						    trigger="click"
						    :content="v.ctype+'.'+v.key">
						    <span slot="reference">{{v.tips}}</span>
						</el-popover>
					</div>
			    </div>
		  	</div>
		  	<div v-if="v.type === 'upload_file'" class="px-3 flex-1">
			    <el-input class="col-4 px-0" :class="getInputCol(v.value)"
			    v-model="v.value"
			    @keyup.enter.native="editConfig(v)"></el-input>
			    <div class="row mx-0 flex-center">
			  	  <el-upload
					  class="avatar-uploader"
					  action="/uploadFiles"
					  name="file"
					  :data="{path:'publics/files',index:index,id:v.id}"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :on-error="handleAvatarError">
			  			<el-button size="small" type="primary">选择文件</el-button>
				  </el-upload>
					<div class="text-muted small px-3" v-if="v.tips">
						<el-popover
						    placement="top-start"
						    width="300"
						    trigger="click"
						    :content="v.ctype+'.'+v.key">
						    <span slot="reference">{{v.tips}}</span>
						</el-popover>
					</div>
			    </div>
		  	</div>
		  	<div v-if="v.type === 'switch'" class="row mx-0 px-3 flex-center flex-1">
			    <el-switch
				  v-model="v.value"
				  active-color="#13ce66"
				  inactive-color="#6c757d"
			      :active-value="1"
			      :inactive-value="0"
				  @change="editConfig(v);">
				</el-switch>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'radio'" class="px-3 flex-1">
			    <el-radio-group 
				    v-model="v.value" 
				    @change="editConfig(v);">
			      	<el-radio v-for="va in v.options" :label="va.value">{{va.title}}</el-radio>
			    </el-radio-group>
				<div class="text-muted small" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'checkbox'" class="px-3 flex-1">
			    <el-checkbox-group 
				    v-model="v.value" 
				    @change="editConfig(v);">
			      	<el-checkbox v-for="va in v.options" :label="va.value">{{va.title}}</el-checkbox>
			    </el-checkbox-group>
				<div class="text-muted small" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'select'" class="row mx-0 px-3 flex-center flex-1">
			    <el-select 
			    	v-model="v.value" 
			    	@change="editConfig(v);">
			      <el-option
			        v-for="item in v.options"
			        :key="item.value"
			        :label="item.title"
			        :value="item.value">
			      </el-option>
			    </el-select>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'color'" class="row mx-0 px-3 flex-center flex-1">
			  	<el-color-picker 
			  		v-model="v.value" show-alpha 
				    @change="editConfig(v);">
			  	</el-color-picker>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'date'" class="row mx-0 px-3 flex-center flex-1">
				<el-date-picker
					v-model="v.value"
					type="date"
					placeholder="选择日期"
			    	@change="editConfig(v);">
				</el-date-picker>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'time'" class="row mx-0 px-3 flex-center flex-1">
				<el-time-picker
					v-model="v.value"
					arrow-control
					:picker-options="{
					selectableRange: '00:00:00 - 23:59:59'
					}"
					value-format="H:m:s"
					placeholder="选择时间"
			    	@change="editConfig(v);">
				</el-time-picker>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'datetime'" class="row mx-0 px-3 flex-center flex-1">
				<el-date-picker
					v-model="v.value"
					type="datetime"
					placeholder="选择日期时间"
			    	@change="editConfig(v);">
				</el-date-picker>
				<div class="text-muted small px-3" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div v-if="v.type === 'array'" class="mx-0 px-3 flex-1">
				  <el-tag
				  :key="tag"
				  v-for="tag in v.value"
				  closable
	      		  effect="plain"
				  class="mr-1"
				  :disable-transitions="false"
				  @close="handleClose(v,tag)">
				  {{tag}}
				</el-tag>
				<el-input
				  class="w-80px"
				  v-if="inputVisible"
				  v-model="inputValue"
				  ref="saveTagInput"
				  size="small"
				  @keyup.enter.native="handleInputConfirm(v)"
				  @blur="handleInputConfirm(v)"
				>
				</el-input>
				<el-button v-else size="small" @click="showInput">添加</el-button>
				<div class="text-muted small" v-if="v.tips">
					<el-popover
					    placement="top-start"
					    width="300"
					    trigger="click"
					    :content="v.ctype+'.'+v.key">
					    <span slot="reference">{{v.tips}}</span>
					</el-popover>
				</div>
		  	</div>
		  	<div class="setting-item-del pr-3">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/setting/edit/'+v.id)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            size="minism"
		            @click="delSetting(index, v)">
		            删除
		        </el-button>
			</div>
		</div>
	  </el-form-item>
		</div>

	</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Data"}
	var list=[];
	var activeNameList=[];
	{else/}
	var list={:json_encode($Data,JSON_UNESCAPED_UNICODE)};
	var activeNameListIndex=[];
	var activeNameList=[{title:'所有',type:'all'}];
	for (var x in list) {
	for (var i in list[x]) {
		if(activeNameListIndex.indexOf(list[x][i].type)<0){
	    	activeNameListIndex.push(list[x][i].type);
	    	switch(list[x][i].type){
	    		case 'input':
	    		activeNameList.push({title:'输入框',type:'input'});
	    		break;
	    		case 'textarea':
	    		activeNameList.push({title:'文本域',type:'textarea'});
	    		break;
	    		case 'upload':
	    		case 'upload_file':
	    		activeNameList.push({title:'上传',type:'upload'});
	    		break;
	    		case 'switch':
	    		activeNameList.push({title:'开关',type:'switch'});
	    		break;
	    		case 'radio':
	    		case 'checkbox':
	    		activeNameList.push({title:'单选/多选',type:'box'});
	    		break;
	    		case 'select':
	    		activeNameList.push({title:'下拉选择',type:'select'});
	    		break;
	    		case 'color':
	    		activeNameList.push({title:'颜色',type:'color'});
	    		break;
	    		case 'date':
	    		case 'time':
	    		case 'datetime':
	    		activeNameList.push({title:'日期时间',type:'date'});
	    		break;
	    		case 'array':
	    		activeNameList.push({title:'数组',type:'array'});
	    		break;
	    	}
		}
	}
	}
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			activeName:'all',
			activeNameList:activeNameList,
			formItemShow:[],
			ctype:'{$ctype}',
			labelPosition:'right',
			loading:false,
			inputVisible: false,
        	inputValue: '',
			list:list
		},
		watch:{
		    view:XYBase.viewWatch,
		    activeName(val,oldVal){
		    	this.setFormItemShow(val);
		    }
		},
		created(){
			XYBase.created(this);
			this.setFormItemShow();
		},
		methods:{
			setFormItemShow(val){
		    	switch(val){
		    		case 'input':
		    		this.formItemShow=['input'];
		    		break;
		    		case 'textarea':
		    		this.formItemShow=['textarea'];
		    		break;
		    		case 'upload':
		    		this.formItemShow=['upload','upload_file'];
		    		break;
		    		case 'switch':
		    		this.formItemShow=['switch'];
		    		break;
		    		case 'box':
		    		this.formItemShow=['radio','checkbox'];
		    		break;
		    		case 'select':
		    		this.formItemShow=['select'];
		    		break;
		    		case 'color':
		    		this.formItemShow=['color'];
		    		break;
		    		case 'date':
		    		this.formItemShow=['date','time','datetime'];
		    		break;
		    		case 'array':
		    		this.formItemShow=['array'];
		    		break;
		    		default:
		    		this.formItemShow=['input','textarea','upload','upload_file','switch','radio','checkbox','select','color','date','time','datetime','array'];
		    		break;
		    	}
			},
	    	delSetting(index,row){
	      		var _this=this;
		        this.$confirm('是否确定删除【'+row.title+'】配置？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          dangerouslyUseHTMLString:true,
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/setting/del/'+row.id,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.list.splice(index,1);
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
		    handleClose(val,tag) {
		        val.value.splice(val.value.indexOf(tag), 1);
		        this.editConfig(val);
		    },
		    showInput() {
		        this.inputVisible = true;
		        this.$nextTick(_ => {
		          this.$refs.saveTagInput[0].$refs.input.focus();
		        });
		    },
		    handleInputConfirm(val) {
		        let inputValue = this.inputValue;
		        if (inputValue) {
		          val.value.push(inputValue);
		        }
		        this.inputVisible = false;
		        this.inputValue = '';
		        this.editConfig(val);
		    },
			getInputCol(val){
				var cla='';
				if(!val)return 'col-sm-2';
				switch(true){
					case val.length>200:
						cla='col-sm-12';
						break;
					case val.length>180:
						cla='col-sm-11';
						break;
					case val.length>160:
						cla='col-sm-10';
						break;
					case val.length>140:
						cla='col-sm-9';
						break;
					case val.length>120:
						cla='col-sm-8';
						break;
					case val.length>100:
						cla='col-sm-7';
						break;
					case val.length>80:
						cla='col-sm-6';
						break;
					case val.length>60:
						cla='col-sm-5';
						break;
					case val.length>40:
						cla='col-sm-4';
						break;
					case val.length>20:
						cla='col-sm-3';
						break;
					default:
						cla='col-sm-2';
						break;
				}
				return cla;
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'web/img'){
							if (this.list[res.data.index] && this.list[res.data.index].id == res.data.id) {
								this.list[res.data.index].value=res.data.path;
								this.list[res.data.index].url=res.data.url;
								this.editConfig(this.list[res.data.index]);
							}
						}else if(res.data.type == 'publics/files'){
							if (this.list[res.data.index] && this.list[res.data.index].id == res.data.id) {
								this.list[res.data.index].value=res.data.path;
								this.editConfig(this.list[res.data.index]);
							}
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
	      	beforeAvatarUpload:function(file) {
				const isJPGPNG = XYBase.config.imageMime.indexOf(file.type)>=0;
				const isLt10M = file.size/1024 <= 10240;

				if (!isJPGPNG) {
				  XYBase.error('缩略图只能是PNG格式');
				  return false;
				}
				if (!isLt10M) {
				  XYBase.error('缩略图大小不能超过 10M!');
				  return false;
				}
				return isJPGPNG && isLt10M;
	      	},
			editConfig(val){
				var _this=this;
				_this.loading=true;
				$.ajax({
					url:'/setting/edit',
					data:val,
					type:'post',
					dataType:'json',
					success:function(ret){
						_this.loading=false;
						if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
				          	XYBase.error(XYBase.config.system_network_error);
						}
					},
					error:function(err){
						_this.loading=false;
				        XYBase.error(XYBase.config.system_network_error);
					}
				});
			}
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}